<template>
	<view class="img-comparison-container" :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
		<!-- 		<view class="before-image" :style="'width:' + x + 'rpx'">
			<view :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
				<image :src="afterImageUrl" class="images" mode="aspectFill" data-type="before" @click="previewImage" />
			</view>
		</view> -->
		<view class="before-image">
			<view style="width: 100%;height: 100%;">
				<image :src="beforeImageUrl" class="images" @click="previewImage" />
			</view>
		</view>
		<!-- <view class="after-image">
			<view :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
				<image :src="beforeImageUrl" class="images" mode="aspectFill" data-type="after" @click="previewImage" />
			</view>
		</view> -->

		<view class="after-image" :class="target?'ani-active':''">
			<view style="width: 600rpx;height: 100%;">
				<image :src="afterImageUrl" class="images" mode="aspectFill" data-type="after" @click="previewImage" />
				<!-- <view class="cover-box"></view> -->
			</view>
		</view>


		<!-- 		<view class="slider-bar" :style="'left:' + x + 'rpx'" @touchmove="handleTouchMove" @touchstart="handleTouchStart"
			@touchend="handleTouchEnd">
			<view class="slider-button"></view>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			width: {
				type: String,
				default: "750",
			},
			height: {
				type: String,
				default: "850",
			},
			beforeImageUrl: {
				type: String,
			},
			afterImageUrl: {
				type: String,
			},
			beforeText: {
				type: String,
				default: "制作前",
			},
			afterText: {
				type: String,
				default: "制作后",
			},
			target: {
				type: Boolean,
				default: true
			}
		},

		data() {
			return {
				isPressDown: false, //鼠标是否正按住
				x: 0, //设置位置
				timeSet: null,
				// target:true,
				// afterImageUrl: ''
			};
		},

		onReady() {
			// this.timeSet = setInterval(() => {
			// 	if (this.x < 600) {
			// 		this.x += 100;
			// 		console.log(this.x)
			// 	} else {
			// 		this.x = 0
			// 	}
			// }, 1000);
		},
		methods: {
			handleTouchStart(event) {
				console.log('开始', event)
				this.isPressDown = true;
				this.startX = event.touches[0].clientX; // 记录触摸起始点
				this.sliderStartX = this.x; // 记录slider起始位置
			},
			handleTouchMove(event) {
				console.log('移动', event)
				if (!this.isPressDown) {
					return;
				}
				const moveX = event.touches[0].clientX - this.startX; // 计算移动距离
				let newX = this.sliderStartX + moveX * 2; // 计算slider新位置
				// 限制 newX 在 0 和 this.width 之间
				newX = Math.max(0, Math.min(newX, this.width));
				this.x = newX; // 更新位置
			},
			handleTouchEnd() {
				this.isPressDown = false;
			},
			previewImage(e) {
				const staticPrefix = "static";
				const imageType = e.currentTarget.dataset.type;
				const imageUrlMap = {
					before: this.beforeImageUrl,
					after: this.afterImageUrl,
				};
				// 如果当前图片URL中包含静态前缀，则直接返回
				if (imageUrlMap[imageType].includes(staticPrefix)) {
					return;
				}
				// 获取当前图片的URL，并使用uni.previewImage方法展示图片
				const currentImageUrl = imageUrlMap[imageType];
				uni.previewImage({
					urls: [imageUrlMap.before, imageUrlMap.after],
					current: currentImageUrl,
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.ani-active {
		animation: xxxx 3s infinite;
	}

	@keyframes xxxx {
		from {
			width: 0;
		}

		to {
			width: 100%;
		}
	}

	.img-comparison-container {
		position: relative;
		display: inline-block;
		overflow: hidden;
		border-radius: 20rpx;
		left: 50%;
		transform: translate(-50%);

		.before-image {
			// position: absolute;
			// top: 0;
			// left: 50%;
			// transform: translateX(-50%);
			// z-index: 1;
			// // width: 50%;
			// overflow: hidden;

			width: 100%;
			height: 100%;

			.images {
				width: 100%;
				height: 100%;
			}

			.before-text {
				position: absolute;
				left: 22rpx;
				top: 22rpx;
				color: #ffffff;
				background: rgba(34, 34, 34, 0.5);
				border-radius: 20rpx;
				padding: 5rpx 15rpx 5rpx 15rpx;
				font-size: 24rpx;
				white-space: nowrap;
			}
		}

		.after-image {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			width: 0;
			height: 100%;

			overflow: hidden;
			transition: 0.5s;
			border-right: 2px dashed #fff;

			.images {
				height: 600rpx;
				width: 600rpx;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 5;
			}

			.after-text {
				position: absolute;
				right: 22rpx;
				top: 22rpx;
				color: #ffffff;
				background: rgba(34, 34, 34, 0.5);
				border-radius: 20rpx;
				padding: 5rpx 15rpx 5rpx 15rpx;
				font-size: 24rpx;
				white-space: nowrap;
			}

			.cover-box {
				width: 100%;
				height: 100%;
				background-color: #fff;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 4;
			}
		}

		.images {
			width: 100%;
			height: 100%;
		}

		.slider-bar {
			cursor: move;
			position: absolute;
			width: 4rpx;
			left: 50%;
			top: 0rpx;
			background: #ffffff;
			height: 100%;
			display: block;
			z-index: 2;
			// box-shadow: 0 0 20rpx 1px rgba(0, 0, 0, 0.4);

			// .slider-button {
			//   position: absolute;
			//   width: 60rpx;
			//   height: 60rpx;
			//   border-radius: 50%;
			//   border: 4rpx solid #ffffff;
			//   background-color: transparent;
			//   left: calc(50% - 30rpx);
			//   top: calc(50% - 30rpx);
			// }

			// &::before {
			//   content: "";
			//   padding: 6rpx;
			//   border: solid #ffffff;
			//   border-width: 0 4rpx 4rpx 0;
			//   position: absolute;
			//   top: calc(50% - 8rpx);
			//   left: calc(50% - 16rpx);
			//   transform: rotate(135deg);
			//   z-index: 1;
			// }

			// &::after {
			//   content: "";
			//   padding: 6rpx;
			//   border: solid #ffffff;
			//   border-width: 0 4rpx 4rpx 0;
			//   position: absolute;
			//   top: calc(50% - 8rpx);
			//   left: 50%;
			//   transform: rotate(-45deg);
			// }
		}
	}
</style>